<template>
  <div>

    <!--    顶部盒子-->
    <div class="top">
      <!--      包围左箭头和搜索框-->
      <div class="top1">
        <!--      左箭头-->
        <van-icon class="leftjiantou" size="20px" @click="fanhui" name="arrow-left"/>
        <!--      搜索框-->
        <template>
          <van-search
              v-model="searchValue"
              placeholder="请输入或扫描单号"
              clearable
              right-icon="scan">
            <!-- 通过自定义插槽来移除放大镜图标 -->
            <template #left-icon>
              <!-- 可以插入一个空的 span 或者其他不显示的元素 -->
              <span></span>
            </template>
          </van-search>
        </template>
      </div>
      <!--      顶部搜索-->
      <span @click="getList()" class="zi2">搜索</span>
    </div>

    <!--    历史搜索-->
    <div class="historicalsearch">
      <p class="zi1">历史搜索</p>
      <!--      删除图标-->
      <van-icon class="deleteicon" @click="deletejilu()" name="delete-o"/>
    </div>

    <!--    历史搜索的记录-->
    <div class="recording">
      <div v-for="i in item" :key="i.id" class="recording1">
        <button @click="zhijiedianji(i.name)" class="button1"><span>  {{ i.name }} </span></button>
      </div>
    </div>


  </div>

</template>

<script>

import {findhistoricalsearch, addhistoricalsearch, deletehistoricalsearch} from "@/api/ParcelTracking/historicalsearch";

export default {
  name: 'ParcelTracking',
  data() {
    return {
      searchValue: null,
      item: [],
      form:{
        name:null,
      },
    };
  },
  methods: {
    /* 删除历史搜索  */
    deletejilu() {
      deletehistoricalsearch().then(res => {
        this.finditem();
      })
    },
    validateInput() {
      // 使用正则表达式验证输入内容
      this.searchValue = this.searchValue.replace(/[^0-9]/g, '');
    },
    /* 搜索点击时间 查询单号
    * 判断输入数字空
    * */
    getList() {
      if (this.searchValue === "") {
        this.$toast("请输入数字");
        return;
      }

      // 确保搜索值只包含数字
      if (!/^\d+$/.test(this.searchValue)) {
        this.$toast("请输入数字");
        return;
      }

      this.form.name = this.searchValue;

      // 去掉日期时间字符串中的 T
      let formattedTimestamp = this.searchValue.replace('T', ' ');

      addhistoricalsearch(this.form).then(res => {
        this.$router.push({ path: '/parceltracking/ParcelTrackingDetail', query: { serchValue: formattedTimestamp } });
      });
    },
    // getList() {
    //   if(this.searchValue==""||this.searchValue==null
    //       || /^[\u4e00-\u9fa5]+$/.test(this.searchValue)||
    //       /^[a-zA-Z]+$/.test(this.searchValue)
    //   ){
    //     this.$toast("请输入单号");
    //     return;
    //   }
    //   this.form.name=this.searchValue
    //   addhistoricalsearch(this.form).then(res => {
    //     this.$router.push({path: '/parceltracking/ParcelTrackingDetail', query: {serchValue: this.searchValue}})
    //   })
    // },

    /* 从历史记录上点击  */
    zhijiedianji(id){
      console.log(id)
      this.$router.push({path: '/parceltracking/ParcelTrackingDetail', query: {serchValue:id}})
    },

    /* 顶部左箭头返回首页 */
    fanhui() {
      this.$router.push({path: '/home/Home'})
    },
    /* 查找搜索记录 */
    finditem() {
      findhistoricalsearch().then(res => {
        this.item = res.data.data;
      })
    }
  },
  created() {
    this.finditem()
  }
};

</script>


<style scoped>
/* 顶部盒子 */
.top {
  margin-top: 30px;
//border: 1px solid blue; width: 100%;
  height: 60px;
}

/* 包围左箭头和搜索框盒子 */
.top1 {
  width: 90%;
  height: 60px;
//border: 1px solid red;
}

/* 顶部左边箭头 */
.leftjiantou {
  float: left;
  margin-top: 17px;
}

/* 顶部搜索框 */
.sousuo1 {
//border: 1px solid red;
}

/* 历史搜索*/
.historicalsearch {
  margin-top: 30px;
//border: 1px solid red; width: 100%;
  height: 35px;
}

/* 历史搜样式 */
.zi1 {
  float: left;
  margin-top: 6px;
  margin-left: 10px;
  font-weight: bold;
  font-size: 17px;
}

/* 删除图标样式 */
.deleteicon {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}

/* 历史记录的盒子 */
.recording {
  margin-top: 30px;
//border: 1px solid red; width: 100%;
  height: 250px;
}

/*  历史搜索记录的显示按钮 */
.button1 {
  float: left;
  border-radius: 15px;
  background-color: #F5F5F5FF;
  border: none;
  padding: 7px 15px;
  margin: 10px 10px;
}

/* 顶部右边搜索样式 */
.zi2 {
  margin-right: 5px;
  font-size: 15px;
//border: 1px solid red; float: right;
  margin-top: -15px;
}


</style>
